import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import EapParamsForm from './hdForms/EapParamsForm';
import EapRecipeForm from './hdForms/EapRecipeForm';
import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ produce, es }) => ({ produce, es }))
@Form.create()
class EapSocket extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    recipeScanModelVisible: false, // 工单配方参数请求的弹框是否显示
    scanRecipeName: "", // 工单扫描的工单名称
    scanRecipeInput: "", // Input 标签
  };

  connectEap = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/connectEap',
    });
  };

  closeEapConnect = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/closeEapConnect',
    });
  };

  clearMsgShow = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/clearMsgShow',
    });
  };
  scanRecipe = () => {
    const { dispatch } = this.props;
    this.setState({
      recipeScanModelVisible: true,
      scanRecipeName: "",
    });
  };
  closeRecipeScanModal = e => {
    const { dispatch } = this.props;
    this.setState({
      recipeScanModelVisible: false,
      scanRecipeName: ""
    })
  }
  requestEapRecipeArgs = e =>{
    const {dispatch} = this.props;
    const {scanRecipeName} = this.state;
    this.closeRecipeScanModal();
    dispatch({
      type:"es/requestEapRecipeArgs",
      payload:scanRecipeName,
    });
  };

  render() {
    const Panel = Collapse.Panel;
    const { recipeScanModelVisible, scanRecipeName, scanRecipeInput } = this.state;
    const { eapParams, eapIsConnect, eapMsgShowList, eapRecipeArgs } = this.props.es;
    const timeitem = [];
    for (let i = 0; i < eapMsgShowList.length; i++) {
      let head = eapMsgShowList[i][0];
      let info = eapMsgShowList[i][1];
      let colorUsed;
      if (head.includes('从EAP接收到消息')) {
        colorUsed = 'red';
        timeitem.push(
          <Timeline.Item color={colorUsed} key={i}>
            <p>
              <font style={{ color: '#DD0000', fontSize: 16 }}>{head}</font>
            </p>
            <p>{info[0]}</p>
            <p>{info[1]}</p>
            <p>{info[2]}</p>
          </Timeline.Item>
        );
      } else {
        colorUsed = 'green';
        timeitem.push(
          <Timeline.Item color={colorUsed} key={i}>
            <p>
              <font style={{ color: '#00AA00', fontSize: 16 }}>{head}</font>
            </p>
            <p>{info[0]}</p>
            <p>{info[1]}</p>
            <p>{info[2]}</p>
          </Timeline.Item>
        );
      }
    }

    return (
      <>
        <Card title="EAP连接状态" style={{ marginLeft: 220 }}>
          <Row>
            状态：{' '}
            {eapIsConnect ? (
              <font style={{ color: '#00FF00', fontSize: 18 }}>已连接</font>
            ) : (
              <font style={{ color: '#FF0000', fontSize: 18 }}>已断开</font>
            )}{' '}

            <span style={{ marginLeft: 100 }}>
              <font style={{ color: '#9933cc', fontSize: 16 }}>扫码枪扫描的工单号</font>
            </span>
            <Button onClick={this.scanRecipe} style={{ marginLeft: 20 }}>
              开始扫描
              </Button>

          </Row>
        </Card>
        <Card
          title={<font style={{ color: '#9933cc', fontSize: 16 }}>Eap参数设置</font>}
          style={{ marginLeft: 220 }}
        >
          <Row>
            <EapParamsForm eapParams={eapParams} />
          </Row>
          <Row style={{ marginTop: 15 }}>
            <p>
              <font style={{ color: '#9933cc', fontSize: 16 }}>Eap配方下发参数</font>
            </p>
            <EapRecipeForm eapRecipeArgs={eapRecipeArgs} />
          </Row>
        </Card>

        <Card
          title={<font style={{ color: '#9933cc', fontSize: 16 }}>设备和EAP通信消息显示</font>}
          style={{ marginLeft: 220 }}
        >
          <Button onClick={this.clearMsgShow}>清空消息</Button>
          <Timeline style={{ marginTop: 20 }}>{timeitem}</Timeline>
        </Card>

          <Modal title="工单扫描确认框"
            visible={recipeScanModelVisible}
            width={600}
            closable={true}
            onCancel = {this.closeRecipeScanModal}
            footer={[
              <Button key="1" onClick={this.closeRecipeScanModal}>
                关闭工单扫描框
            </Button>,

              <Button key="2" onClick = {this.requestEapRecipeArgs}>
                请求EAP配方参数
            </Button>,
            ]}
          >
            <input
              ref={function (input) {
                if (input != null)
                  input.focus();
              }}
              defaultValue={''}
              value={scanRecipeName}
              onChange={e => this.setState({ scanRecipeName: e.target.value })}
              style={{ marginLeft: 15, marginRight: 10, width: 500 }}
            />
          </Modal>

      </>
    );
  }
}
export default EapSocket;
